<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('表单设计') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('设计编码')" prop="desformCode">
        <el-input
          v-model="queryParams.desformCode"
          :placeholder="$t('表单设计编码')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('设计名称')" prop="desformName">
        <el-input
          v-model="queryParams.desformName"
          :placeholder="$t('表单设计名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:data:edit']"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addHandle"
        >{{ $t('新增') }}</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="designFormDataList" border tooltip-effect="darkTable">
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('表单设计名称')" align="center" prop="desformName" />
      <el-table-column :label="$t('表单设计编码')" align="center" prop="desformCode" />
      <el-table-column :label="$t('关联表')" align="center" prop="tableName" />
      <el-table-column :label="$t('备注')" align="center" prop="remark" />
      <el-table-column :label="$t('发布目录')" align="center" prop="address" width="280" show-overflow-tooltip />
      <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="280">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['system:data:edit']"
            size="small"
            type="text"
            icon="el-icon-s-promotion"
            @click="desHandle(scope.row)"
          >{{ $t('设计表单') }}</el-button>
          <el-button
            size="small"
            type="text"
            icon="el-icon-s-data"
            @click="goFormDataHandle(scope.row)"
          >{{ $t('数据列表') }}</el-button>
          <el-divider direction="vertical" />
          <el-dropdown>
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <a @click="releaseHandle(scope.row)">{{ $t('发布') }}</a>
              </el-dropdown-item>
              <el-dropdown-item divided>
                <a @click="updateHandle(scope.row)">{{ $t('编辑') }}</a>
              </el-dropdown-item>
              <el-dropdown-item>
                <a @click="deleteHandle(scope.row)">{{ $t('删除') }}</a>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改单设计数据对话框 -->
    <el-dialog
      :title="$t(title)"
      top="50px"
      :visible.sync="formOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      width="30%"
      append-to-body
    >
      <designFormDataForm ref="designFormDataForm" />
    </el-dialog>
    <el-dialog
      v-if="desModel"
      :title="$t(desTitle)"
      :visible.sync="desModel"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :fullscreen="true"
      :append-to-body="true"
    >
      <designModel ref="designModel" />
    </el-dialog>
    <el-dialog
      :title="$t(desTitle)"
      :visible.sync="templet"
      :lock-scroll="false"
      :append-to-body="true"
    >
      <formTemplet ref="formTemplet" />
    </el-dialog>

    <!-- 发布菜单 -->
    <!-- 添加或修改菜单对话框 -->
    <el-dialog v-el-drag-dialog :title="$t('菜单')" :visible.sync="releaseOpen" width="70%" class="dataForm" :close-on-click-modal="false" :lock-scroll="false">
      <div style="overflow: auto;padding: 20px;margin: -20px;">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('上级菜单')">
                <treeselect v-model="form.parentId" :options="menuOptions" :show-count="true" :placeholder="$t('请选择')">
                  <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
                    {{ $t(node.label) }}
                    <span v-if="shouldShowCount" :class="countClassName">({{ count }})</span>
                  </label>
                </treeselect>
              </el-form-item>
            </el-col>
            <el-col :span="12" style="height: 84px">
              <el-form-item :label="$t('菜单类型')" prop="menuType">
                <el-radio-group v-model="form.menuType">
                  <el-radio label="M">{{ $t('目录') }}</el-radio>
                  <el-radio label="C">{{ $t('菜单') }}</el-radio>
                  <el-radio label="F">{{ $t('页签') }}</el-radio>
                  <el-radio label="Z">{{ $t('子页签') }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('菜单图标')">
                <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                  <IconSelect ref="iconSelect" @selected="selected" />
                  <el-input slot="reference" v-model="form.icon" :placeholder="$t('菜单图标')" readonly>
                    <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
                    <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                  </el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('菜单标识')" prop="menuKey">
                <el-input v-model="form.menuKey" :placeholder="$t('菜单标识')" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('菜单名称')" prop="menuName">
                <el-input v-model="form.menuName" :placeholder="$t('菜单名称')" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('显示排序')" prop="orderNum">
                <el-input-number v-model="form.orderNum" controls-position="right" :min="0" :max="9999" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="$t('组件路径')" prop="component">
                <el-input v-model="form.component" disabled :placeholder="$t('组件路径')" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('权限标识')">
                <el-input v-model="form.perms" :placeholder="$t('权限标识')" :maxlength="50" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('是否外链')">
                <el-radio-group v-model="form.isFrame">
                  <el-radio label="0">{{ $t('是') }}</el-radio>
                  <el-radio label="1">{{ $t('否') }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="$t('菜单状态')">
                <el-radio-group v-model="form.visible">
                  <el-radio v-for="dict in visibleOptions" :key="dict.dictValue" :label="$t(dict.dictValue)">{{ $t(dict.dictLabel) }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">{{ $t("取消") }}</el-button>
        <el-button type="primary" @click="submitForm">{{ $t("发布") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listDesignFormData, delDesignFormData, exportDesignFormData, saveMenu } from '@/api/system/desform/data/designFormData'
import designFormDataForm from './designFormDataForm.vue'
import designModel from './designModel.vue'
import formTemplet from '../formTemplet/formTemplet'
import { treeselect } from '@/api/system/menu'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import IconSelect from '@/components/IconSelect'
export default {
    components: {
        designFormDataForm,
        designModel,
        formTemplet,
        Treeselect,
        IconSelect
    },
  data() {
      return {
          // 遮罩层
          loading: true,
          templet: false,
          desModel: false,
          openDesFlag: false,
          headId: '',
          // 总条数
          total: 0,
           // 发布页面
          releaseOpen: false,
          // 单设计数据表格数据
          designFormDataList: [],
          // 弹出层标题
          title: '新增',
          desTitle: '表单设计器',
          // 是否显示弹出层
          formOpen: false,
          // 查询参数
          queryParams: {
              desformId: undefined,
              desformCode: undefined,
              desformName: undefined,
              desformDataJson: undefined,
              onlineFormCode: undefined,
              onlineFormDataId: undefined,
              pageNum: 1,
              pageSize: 10
          },
            // 菜单树选项
          menuOptions: [],
          visibleOptions: [],
          // 表单参数
          form: {},
          // 表单校验
          rules: {}
      }
  },
  created() {
      this.getList()
      this.getDicts('sys_show_hide').then(response => {
      this.visibleOptions = response.data
    })
  },
  methods: {
    /** 查询单设计数据列表 */
    getList() {
        this.loading = true
        listDesignFormData(this.queryParams).then(response => {
            this.designFormDataList = response.rows
            this.total = response.total
            this.loading = false
        })
    },

    // 表单重置
    reset() {
        this.form = {
            id: undefined,

            desformId: undefined,

            desformCode: undefined,

            desformName: undefined,

            desformDataJson: undefined,

            onlineFormCode: undefined,

            onlineFormDataId: undefined,

            createBy: undefined,

            createTime: undefined,

            updateBy: undefined,

            updateTime: undefined

        }
        this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
        this.queryParams.pageNum = 1
        this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
        this.resetForm('queryForm')
        this.queryHandle()
    },
    /** 新增按钮操作 */
    addHandle() {
         this.title = '新增'
        this.formOpen = true
        this.$nextTick(() => {
            this.$refs.designFormDataForm.init(null)
        })
    },
    /** 修改按钮操作 */
    updateHandle(row) {
      this.title = '编辑'
        this.formOpen = true
        this.$nextTick(() => {
            // 调用form页面的 init 方法初始化数据
            this.$refs.designFormDataForm.init(row)
        })
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
        }).then(function() {
            return delDesignFormData(row.id)
        }).then(() => {
            this.getList()
            this.msgSuccess(this.$t('删除成功'))
        }).catch(function() {
        })
    },
    /** 导出按钮操作 */
    exportHandle() {
        const queryParams = this.queryParams
        this.$confirm(this.$t('是否确认导出数据项?'), this.$t('警告'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
        }).then(function() {
            return exportDesignFormData(queryParams)
        }).then(response => {
            this.download(response.msg)
        }).catch(function() {
        })
    },
    // 取消按钮
    cancel() {
      this.releaseOpen = false
      this.form = {}
    },
    // 跳转到设计表单页面
    desHandle(row) {
      const { href } = this.$router.resolve({ path: '/designModel',
      query: { headId: row.onlineFormDataId,
                id: row.id }})
      window.open(href, '_blank')
    },
    seeHandle(row) {
          this.templet = true
           this.$nextTick(() => {
            // 调用form页面的 init 方法初始化数据
            this.$refs.formTemplet.initFormRender(row)
        })
    },
    goFormDataHandle(row) {
      if (!row.desformDataJson) {
          this.$message('请先设计表单')
          return
      }
       const { href } = this.$router.resolve({ path: '/onlinePageList',
      query: { queryId: row.onlineFormDataId, templetId: row.id }})
      window.open(href, '_blank')
    },
      /** 查询菜单下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.menuOptions = []
        const menu = {
          id: 0,
          label: this.$t('主类目'),
          children: []
        }
        menu.children = response.data
        this.menuOptions.push(menu)
      })
    },
    // 发布功能
    releaseHandle(row) {
      this.releaseOpen = true
      this.headId = row.id
      this.form = {
        menuId: undefined,
        menuKey: row.uniqueKey,
        parentId: 0,
        menuName: row.tableTxt,
        icon: 'guide',
        menuType: 'C',
        orderNum: 1,
        isFrame: '1',
        visible: '0',
        permissionList: []
      }
      this.form.component = 'system/desform/release/onlinePageList?queryId=' + row.onlineFormDataId + '&isDes=1&desId=' + row.id
      this.getTreeselect()
    },
       /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.form.scene = '0'
          saveMenu(this.form, this.headId).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('发布成功'))
              this.cancel()
              this.getList()
            } else {
              this.msgError(response.msg)
            }
          })
        }
      })
    },
     // 选择图标
    selected(name) {
      this.form.icon = name
    }
  }
}
</script>
<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-dropdown {
  font-size: 12px;
}
</style>
